/*
 * @Date: 2022-05-22 17:18:56
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-22 20:40:26
 * @FilePath: \my-react-components\src\component\Input\index.tsx
 * @Description: something
 */
import React, { InputHTMLAttributes, memo } from "react";
import classNames from "classnames";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { ChangeEvent } from "react";
import Icon from "../Icon";
type Size = "large" | "small";
//Omit 忽略 input 原生属性size
export interface IInputProps
  extends Omit<InputHTMLAttributes<HTMLElement>, "size"> {
  /**输入框是否禁用*/
  disabled?: boolean;
  /**输入框大小 */
  size?: Size;
  /**输入框图标 */
  icon?: IconProp;
  /**前缀 */
  prepend?: string | React.ReactElement;
  /**后缀 */
  append?: string | React.ReactElement;
  /**输入值发生改变 */
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
}
const Input: React.FC<IInputProps> = memo(
  ({
    disabled,
    size,
    icon,
    prepend,
    append,
    style,
    className,
    ...restProps
  }) => {
    const classes = classNames("sailor-input-wrapper", className, {
      [`input-size-${size}`]: size,
      "is-disabled": disabled,
      "input-group": prepend || append,
      "input-group-append": !!append,
      "input-group-prepend": !!prepend,
    });
    return (
      <div className={classes} style={style}>
        {prepend && <div className="sailor-input-group-prepend">{prepend}</div>}
        {icon && (
          <div className="icon-wrapper">
            <Icon icon={icon} title={`title-${icon}`} />
          </div>
        )}
        <input
          className="sailor-input-inner"
          disabled={disabled}
          {...restProps}
        />
        {append && <div className="sailor-input-group-append">{append}</div>}
      </div>
    );
  },
);

export default Input;
